import React from 'react';

import styled from 'styled-components';

const MyLabel = styled.p<{
  color: string; top: number, right: number
}>`
  position: absolute;
  right: ${props => props.right}px;
  top: ${props => props.top}px;
  padding: 3px 10px;
  color: ${props => props.color};
  border-radius: 14px;
  border: 1px solid ${props => props.color};
  height: 28px;
  line-height: 22px;
  text-align: center;
`

const Label = ({ value, color = '#0880DF', top = 10, right = 20 }) => (
  <MyLabel top={top} right={right} color={color}>{ value }</MyLabel>
)

export default Label;